<template>
	<div class="user">
		<!-- 个人信息 -->
		
		<div class="user_info_box">
			<!-- 登录前 -->
		  <div class="user_info" v-if="!login_flag">
			   <div class="user_img" >
			   	<img src="../../assets/images/user_img.jpg" alt="" @click="goto_login"/>
			   </div>
			   <div class="user_text">
			   	<p class="user_text1" @click="goto_login">未登录</p>
			   	<p class="user_text2" @click="goto_login">点击登录账号</p>
			   </div>
			   <div class="setting">
			   	<p @click="goto_setting">设置</p>
			   </div>
		   </div>
		   <!-- 登录后 -->
		  <div class="user_info" v-if="login_flag">
		   			   <div class="user_img" >
		   			   	<img :src="user_info.avatar" alt="" @click="goto_personal_information"/>
		   			   </div>
		   			   <div class="user_text">
		   			   	<p class="user_text1"  @click="goto_personal_information">{{user_info.nickname}}</p>
		   			   	<p class="user_text2"  @click="goto_personal_information">更新头像昵称</p>
		   			   </div>
		   			   <div class="setting">
		   			   	<p @click="goto_setting">设置</p>
		   			   </div>
		   </div>
		  
		</div>
		<!-- 订单 -->
		<div class="orders_buttons">
			<div class="orders_buttons_title">
				<div class="my_order_title">
					<p>我的订单</p>
				</div>
				<div class="go_all_orders">
					<p @click="go_order">查看全部订单</p>
				</div>
			</div>
			
			<div class="orders_buttons_items">
				<div class="orders_buttons_item" >
					<div class="orders_buttons_item_img" >
						<img src="../../assets/images/order_icon1.png" alt="" @click="go_order(0)"/>
						
					</div>
					<div class="orders_buttons_item_text">
						<p>待付款</p>
					</div>
				</div>
				<div class="orders_buttons_item" >
					<div class="orders_buttons_item_img" >
						<img src="../../assets/images/order_icon2.png" alt="" @click="go_order(1)"/>
						
					</div>
					<div class="orders_buttons_item_text">
						<p>待发货</p>
					</div>
				</div>
				<div class="orders_buttons_item" >
					<div class="orders_buttons_item_img">
						<img src="../../assets/images/order_icon3.png" alt="" @click="go_order(2)"/>
						
					</div>
					<div class="orders_buttons_item_text">
						<p>待收货</p>
					</div>
				</div>
				<div class="orders_buttons_item" >
					<div class="orders_buttons_item_img">
						<img src="../../assets/images/order_icon4.png" alt="" @click="go_order(3)"/>
						
					</div>
					<div class="orders_buttons_item_text">
						<p>待评价</p>
					</div>
				</div>
				<div class="orders_buttons_item">
					<div class="orders_buttons_item_img">
						<img src="../../assets/images/order_icon5.png" alt="" />
						
					</div>
					<div class="orders_buttons_item_text">
						<p>客服</p>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 猜你喜欢 -->
		<guess></guess>
		<!-- 底部 -->
		<foot></foot>
	</div>
</template>

<script>
	export default {
	  name: 'user',
	  data() {
	  	return{
			login_flag:false,
			user_info:{}
		}
	  },
	async  mounted() {
	  	if(localStorage.getItem('token')){
			this.login_flag=true
		await	this.$store.dispatch('userStore/get_user_info',localStorage.getItem('token'))
			this.user_info=this.$store.state.userStore.user_info
		}
		else{
			this.login_flag=false
		}
	  },
	  methods:{
		  goto_login(){
			  this.$router.push({
				  name:'login'
			  })
		  },
		  go_order(index){
			  this.$router.push({
				  name:'order',
				  params:{
					  index
				  }
			  })
		  },
		  goto_personal_information(){
			  this.$router.push({
			  				  name:'personal_information'
			  				  
			  })
		  },
		  goto_setting(){
			  this.$router.push({
				  name:'setting'
			  })
		  }
	  }
	}
</script>

<style lang="scss">
	.user{
		width: 100%;
		height: 100%;
		background-color: #F7F7F7;
		display: flex;
		justify-content: center;
		align-content: flex-start;
		flex-wrap: wrap;
		.user_info_box{
			width: 100%;
			height: 20%;
			background-color: #5AC7A7;
			border-bottom-left-radius: 50px;
			border-bottom-right-radius: 50px;
			margin-bottom: -15%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: flex-start;
			.user_info{
				width: 100%;
				height: 50%;
				
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: flex-start;
				.user_img{
					width: 30%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					
					img{
						width: 51%;
						height: 70%;
						border-radius: 100%;
					}
				}
				.user_text{
					width: 70%;
					height: 100%;
					
					color: white;
					.user_text1{
						font-size: 30px;
						width: 200px;
						
						
					}
					.user_text2{
						font-size: 22px;
						font-weight: lighter;
						width: 150px;
					}
				}
				.setting{
					width: 100%;
					height: 50px;
					
					display: flex;
					justify-content: flex-end;
					align-content: center;
					p{
						font-size: 30px;
						margin-top: -40px;
						color: white;
						padding-right: 30px;
					}
					
				}
			}
			
			
		}
		.orders_buttons{
			margin-bottom: 80px;
			z-index: 999;
			width: 95%;
			border-radius: 10px;
			height: 15%;
			background-color: white;
			display: flex;
			flex-wrap: wrap;
			.orders_buttons_title{
				width: 100%;
				height: 30%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0px 20px ;
				box-sizing: border-box;
				.my_order_title{
					letter-spacing: 3px;
					font-size: 30px;
				}
				.go_all_orders{
					font-size: 25px;
					color: gray;
				}
			}
		
		    .orders_buttons_items{
				width: 100%;
				height: 60%;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				.orders_buttons_item{
					width: 20%;
					height: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					align-items: center;
					.orders_buttons_item_img{
						width: 50%;
						height: 44%;
						img{
							width: 100%;
							height: 100%;
						}
					}
					.orders_buttons_item_text{
						width: 100%;
						height: 20%;
						font-size: 26px;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
				
			}
		
		}
	}
</style>